<template>
	<gracePage :flexVal="1" statusBarBG="#1CA376" class="main-bodybg-color" headerBG="#1CA376" :bounding="false">
		<view slot="gHeader">
			<!--  演示一个渐变背景，请根据项目实际需求自行改进  -->
			<view class="grace-header-body grace-relative main-bg-nvue-color" footerBg="#1CA376">
				<view class="ml-2" ><image src="/static/images/logo.png" class="logoClass" mode="widthFix" lazy-load></image></view>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 mx-3"><graceSearch placeholder="搜索你心仪的商品" disabled="true" @tapme="tapmeSreach"></graceSearch></view>
				<!-- 设置按钮 -->
				<text class="grace-header-icons pr-3" style="width: 160rpx;"></text>
				<!-- <view class="grace-badge-point" style="top:15rpx; right:20rpx;"></view> -->
			</view>
			<view class="px-2 py-1 main-bg-nvue-color" v-show="showTopStatus">
				<graceNavBar
					:items="tabs"
					:currentIndex="currentIndex"
					@change="navChange"
					textAlign="center"
					color="#ffffff"
					activeColor="#ffffff"
					fontSize="30rpx"
					activeFontSize="32rpx"
					activeLineBg="linear-gradient(to right, #ffffff,#ffffff)"
					activeDirection="center"
				></graceNavBar>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-flex-v1 main-bodybg-color">
			<!-- 	<scroll-view
					scroll-y="true"
					:style="{ height: bodyBoxNum + 'px' }"
					@touchstart="touchstart"
					@touchmove="touchmove"
					@touchend="touchend"
					@scroll="scroll"
					@scrolltolower="scrollend"
					:show-scrollbar="false"
				> -->
			<!-- 全屏 Loading -->
			<graceFullLoading :graceFullLoading="graceFullLoading" logoUrl="/static/images/lodingbg.png"></graceFullLoading>
			<view id="headerBox">
				<block :key="listIndex" v-for="(list, listIndex) in newsitems">
					<!-- 轮播图 -->
					<view class="py-2 main-bg-nvue-color-linear " v-if="list.module === 'slide'">
						<graceSwiper :swiperItems="list.data.list" :width="750" :height="315" borderRadius="15rpx" @taped="taped"></graceSwiper>
					</view>
					<!-- 九宫格 -->
					<view class="pb-1 main-bodybg-color" v-if="list.module === 'nav' && list.data.isNumberSel >= 4">
						<scroll-view class="grace-scroll-x" :show-scrollbar="false" scroll-x>
							<view class="grace-grids grace-margin-top five mx-4 my-1">
								<block v-for="(item, index) in list.data.list" :key="index">
									<view class="grace-grids-items" @click="gotoPage(item.url)">
										<image class="grace-grids-icon-img-my" :src="item.img" mode="widthFix" lazy-load></image>
										<text class="grace-grids-text font-sm">{{ item.desc }}</text>
									</view>
								</block>
							</view>
						</scroll-view>
					</view>
				</block>
				<!-- 活动图 -->
				<view class="mx-3" @click="toNavigateTo('/pages/homeBox/freePurchase/freePurchase')" v-show="freePurchaseStatus">
					<view class="huodongbox" style="background: url(https://zhenzhixiao.cn/index/images/banner.png);background-size: cover;">
						<view class="grace-img-card-bg grace-flex grace-flex-end grace-flex-vcenter">
							<image :src="'/static/images/goto.png'" class="img-go animate1" mode="widthFix" lazy-load></image>
						</view>
					</view>
				</view>
				<block :key="listIndex" v-for="(list, listIndex) in newsitems">
					<!-- 筱资套装 -->
					<view class="mx-2  grace-bg-white border-radius-15  main-border-radius-small" :classes="['column']" v-if="list.suitlist">
						<view class="px-2">
							<view class="grace-list-items">
								<view class="ucenter-face">
									<view class="grace-nowrap">
										<view class="grace-nowrap">
											<text class="grace-title grace-h4">筱资</text>
											<text class="grace-title grace-h4 pr-2 grace-red">套装</text>
										</view>
										<view class="border-1"></view>
									</view>
								</view>
								<view class="grace-list-body ">
									<view class="grace-nowrap">
										<view class="grace-nowrap ">
											<text class="grace-h6 grace-black6">热门套装</text>
											<text class="grace-h6 pr-2 pl-1 grace-black6">快来抢购</text>
										</view>
									</view>
								</view>
								<text class="grace-h6 main-size-color"></text>
							</view>
						</view>
						<swiper class="swiper" @change="swiperchange" style="height: 344rpx;">
							<swiper-item v-for="(item, index) in restructureArr" :key="index">
								<view class="" style="width: 720rpx;">
									<view class="grace-wrap grace-flex-vtop pt-1">
										<view class="list-box grace-nowrap grace-flex-vcenter mx-1" v-for="(obj, index2) in item" :key="index2">
											<view class="box-title grace-flex1 mx-2" @click="shopInfoFn3(obj.goods_id)">
												<view class="grace-nowrap">
													<!-- 溢出隐藏样式需要指定外层宽度 -->
													<text class="grace-h4 main-font-color grace-ellipsis list-title">{{ obj.goods_name }}</text>
												</view>
												<view class="grace-nowrap">
													<!-- 溢出隐藏样式需要指定外层宽度 -->
													<text class="grace-black9 font-size-24 my-1 list-des">{{ obj.goods_brief }}</text>
												</view>
												<!-- <text class="grace-black9 font-size-24 py-1">{{ obj.goods_brief }}</text> -->
												<view class="grace-rows pb-2">
													<view class="grace-rows">
														<text class="grace-text-small grace-red pt-1">￥</text>
														<text class="grace-h5 grace-red">{{ obj.shop_price }}</text>
													</view>
													<text class="grace-text-small grace-gray grace-line-through pt-1">￥{{ obj.market_price }}</text>
												</view>
											</view>
											<view class="box-img" @click="shopInfoFn3(obj.goods_id)"><image :src="obj.goods_thumb" mode="widthFix" lazy-load></image></view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
						<view class="grace-nowrap grace-flex-center py-2">
							<view class="scroll-box grace-tbr-large"><view :style="{ marginLeft: marginLeft + 'rpx' }" class="scroll-btn grace-tbr-large"></view></view>
						</view>
					</view>
				</block>
			</view>
			<!-- 分类 -->
			<view id="bodyBox" :style="{ minHeight: bodyBoxNum }">
				<view class="py-2">
					<graceNavBar
						:items="tabs"
						:currentIndex="currentIndex"
						@change="navChange"
						textAlign="center"
						color="#000000"
						activeColor="#1CA376"
						fontSize="30rpx"
						activeFontSize="36rpx"
						activeLineBg="linear-gradient(to right, #1CA376,#1CA376)"
						activeDirection="center"
					></graceNavBar>
				</view>
				<view class="grace-space-between grace-body mt-1 ">
					<view></view>
					<view class="grace-waterfall-item" v-for="(lists, index1) in filterArrnewsAll" :key="index1">
						<view class="grace-img-card-item grace-bg-white my-shop-large " v-for="(products, index2) in lists" :key="index2" @click="shopInfoFn(products.goods_id)">
							<image
								:src="products.goods_thumb"
								mode="widthFix"
								class="my-shop-large-img"
								:style="{ width: '340rpx', height: '340rpx' }"
								:data-index1="index1"
								:data-index2="index2"
								lazy-load
							></image>
							<view class=" pl-2 overflow-hidden">
								<text class="grace-img-card-title grace-text grace-h5" style="height: 40rpx;line-height: 40rpx;">{{ products.goods_name }}</text>
							</view>
							<view class="pt-2 grace-rows justify-content py-3 px-2">
								<!-- 顾问显示得价格 -->
								<view class="grace-rows" v-if="getUserRankNum">
									<view class="grace-rows">
										<text class="grace-text-small grace-red pt-1">￥</text>
										<text class="grace-h4 grace-red">{{ products.shop_price }}</text>
									</view>
									<text class="grace-text-small grace-gray pt-1 pl-1">vip￥{{ products.vip1_price }}</text>
								</view>
								<!-- 默认价 -->
								<view class="grace-rows" v-else>
									<view class="grace-rows">
										<text class="grace-text-small grace-red pt-1">￥</text>
										<text class="grace-h4 grace-red"> {{ products.shop_price }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="grace-img-card-item grace-bg-white my-shop-large" v-if="filterArrnewsAll[1].length == 0"></view>
					</view>
				</view>
				<!-- 状态{{ loadingTypes[currentIndex] }}下标{{currentIndex}}分页 {{ pages[currentIndex] }} -->
				<graceLoading :loadingType="loadingTypes[currentIndex]"></graceLoading>
			</view>
			<!-- </scroll-view> -->
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceSearch from '../../graceUI/components/graceSearch.vue';
import graceNavBar from '../../graceUI/components/graceNavBar.vue';
import graceSwiper from '@/components/myVue/graceSwiper.vue';
import graceLoading from '../../graceUI/components/graceLoading.vue';
import graceFullLoading from '../../graceUI/components/graceFullLoading.vue';

import tools from '@/common/js/tools.js';
export default {
	data() {
		return {
			// 全屏加载
			graceFullLoading: false,
			// 显示头部 tab
			showTopStatus: false,
			tabs: [],
			currentIndex: 0,
			freePurchaseStatus: false,
			// 数据列表
			newsitems: [],
			restructureArr: [],
			marginLeft: 0,
			//避免重复提交
			oneGoStatus: true,
			// 分类
			headerBoxNum: 0,
			bodyBoxNum: 0,
			scrollHeight: 0,
			gBodyNum: 0,

			newsAll: [],
			tabsAll: [],

			filterArrnewsAll: [],

			// 加载状态
			loadingTypes: [],
			pages: [],

			// 用户等级
			getUserRankNum: ''
		};
	},
	onShow() {
		uni.$on('getUserRank', res => {
			// 清除监听
		});
	},
	onLoad: function() {
		uni.$on('getUserRank', res => {
			// 清除监听
			this.getUserRankNum = res.user_rank;
			this.discountNum = res.discount;
		});
	},
	onReady() {
		setTimeout(() => {
			var _self = this;
			//
			uni.createSelectorQuery()
				.select('#headerBox')
				.fields({ size: true }, function(res) {
					if (!res) {
						return;
					}
					_self.headerBoxNum = res.height;
					_self.scrollHeight = _self.headerBoxNum + _self.bodyBoxNum;
				})
				.exec();
			uni.createSelectorQuery()
				.select('#bodyBox')
				.fields({ size: true }, function(res) {
					if (!res) {
						return;
					}
					_self.bodyBoxNum = res.height;
					_self.scrollHeight = _self.headerBoxNum + _self.bodyBoxNum;
				})
				.exec();
		}, 1000);
	},
	created() {
		// 全屏加载
		// this.graceFullLoading = true;
		// 初始化数据
		this.__init(0);
	},
	methods: {
		// 初始化
		async __init(status) {
			let _this = this;
			let result = await this.$HTTP.post('/api/api.php', { act: 'get_index' });
			console.log('这是首页的返回数控', result);
			_this.newsitems = result;
			if (status != 0) {
				uni.vibrateShort();
				_this.pages = [1, 0, 0, 0, 0];
				_this.loadingTypes = [];
				_this.scrollend();
			}
			for (var i = 0; i < _this.newsitems.length; i++) {
				if (_this.newsitems[i].module === 'product') {
					_this.newsAll = _this.newsitems[i].list;
					_this.tabsAll = _this.newsitems[i].cat;
					_this.freePurchaseStatus = true;
					_this.filterArrnewsAll = _this.filterArr(_this.newsitems[i].list);
					// _this.graceFullLoading = false;
					uni.stopPullDownRefresh();
					_this.topTabsArrFn();
				}
				if (_this.newsitems[i].suitlist) {
					_this.restructureArr = tools.group(_this.newsitems[i].suitlist, 4);
				}
			}
		},
		toNavigateTo(url) {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: url,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		// // 下拉刷新函数 ( 请根据项目需要自行编写代码 )
		// reload() {
		// 	// 刷新完毕后关闭刷新
		// 	this.__init(this.currentIndex);
		// },

		// 进入商品详情
		shopInfoFn: function(id) {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: '/pages/shop/shopInfo/shopInfo?id=' + id,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		// 进入商品详情
		shopInfoFn3: function(id) {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: '/pages/shop/shopInfo3/shopInfo3?id=' + id,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		tapmeSreach() {
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: '/pages/sreach/sreach',
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		swiperchange: function(e) {
			let current = (e && e.detail.current) || 0;
			var arrleng = this.restructureArr.length != 0 ? this.restructureArr.length - 1 : this.restructureArr.length;
			var Pleft = current * (50 / arrleng);
			if (current == 0) this.marginLeft = 0;
			else this.marginLeft = Pleft;
		},
		filterArr(arr) {
			var Left = [],
				Right = [];
			var arrSet = arr[this.currentIndex];
			if (arrSet === undefined) return;
			if (arrSet.length === 0) return [Left, Right];
			for (var i = 0; i < arrSet.length; i++) {
				if (i % 2 == 0) Left.push(arrSet[i]);
				else Right.push(arrSet[i]);
			}
			return [Left, Right];
		},
		navChange: function(e) {
			this.currentIndex = e;
			let _this = this;
			// 根据判断是不是第一次点击 来加载新的数据
			if (_this.newsAll[_this.currentIndex].length === 0) {
				_this.scrollend();
			} else {
				_this.filterArrnewsAll = _this.filterArr(_this.newsAll);
			}
		},
		scrollend() {
			let _this = this;
			// 避免重复加载
			if (this.loadingTypes[this.currentIndex] == 1 || this.loadingTypes[this.currentIndex] == 2) {
				if (_this.newsAll[_this.currentIndex].length === 0) {
					// 解除重复加载
					_this.filterArrnewsAll = _this.filterArr(_this.newsAll);
				}
				return;
			}
			_this.loadingTypes[_this.currentIndex] = 1;
			let pageYe = _this.pages[_this.currentIndex] + 1;
			let options = {
				act: 'get_goods',
				cat_id: _this.tabsAll[_this.currentIndex].cat_id,
				page: pageYe
			};
			this.$HTTP.post('/api/api.php', options).then(data => {
				var count = data.count / (10 * pageYe);
				var unm = 0;
				if (count > 1) unm = 0;
				else unm = 2;
				// 加载中表示还存在数据 可添加
				if (unm === 0) {
					_this.$set(_this.pages, _this.currentIndex, pageYe);
					_this.loadingTypes[_this.currentIndex] = 0;
				}
				// 根据总数得到是否可继续加载
				_this.$set(_this.loadingTypes, _this.currentIndex, unm);
				if (data.error) {
					// _this.newsAll[_this.currentIndex] = _this.newsAll[_this.currentIndex];
				} else {
					_this.newsAll[_this.currentIndex] = _this.newsAll[_this.currentIndex].concat(data.list);
				}
				// 解除重复加载
				_this.filterArrnewsAll = _this.filterArr(_this.newsAll);
			});
		},
		gotoPage(url) {
			// console.log(this.loginStatus)
			console.log('url', url);
			if (this.oneGoStatus) {
				this.oneGoStatus = false;
				uni.navigateTo({
					url: url,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		topTabsArrFn() {
			var arr = this.tabsAll,
				uArr = [],
				oArr = [],
				pArr = [];
			for (var i = 0; i < arr.length; i++) {
				uArr.push(arr[i].cat_name);
				oArr.push(0);
				if (i == 0) pArr.push(1);
				else pArr.push(0);
			}
			this.pages = pArr;
			this.loadingTypes = oArr;
			this.tabs = uArr;
		}
	},
	onPullDownRefresh: function() {
		this.__init(this.currentIndex);
	},
	onPageScroll(e) {
		console.log(e, this.headerBoxNum);
		if (e.scrollTop >= this.headerBoxNum) this.showTopStatus = true;
		else this.showTopStatus = false;
	},
	/**
	 *  页面滑动事件
	 */
	onReachBottom: function(e) {
		console.log(1111, e);
		this.scrollend();
	},
	onUnload() {
		// 移除监听事件
		uni.$off('submitInfo');
		uni.$off('getUserRank');
	},
	filters: {
		// discountFn(value, discount) {
		// 	if (value == '0.01') return value;
		// 	return tools.accMul(+value, +discount);
		// }
	},
	components: {
		gracePage,
		graceSearch,
		graceNavBar,
		graceSwiper,
		graceFullLoading
	}
};
</script>
<style scoped>
@import '../../graceUI/animate.css';
/* 自定义动画效果、时间、循环 */
.animate1 {
	animation: pulse 1s infinite;
}
/* 头部 */
.logoClass {
	width: 118rpx;
	height: 38rpx;
}
.grace-header-icons {
	width: 30px;
}
/* 分类 */
.grace-grids-icon-img-my {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
}
.grace-grids-items {
	width: 166rpx;
}
/* 活动 */
.grace-img-card-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	right: -10;
	bottom: -25;
}
.img-go {
	width: 99rpx;
	height: 102rpx;
	margin-top: 10rpx;
	padding-right: 90rpx;
}
.border-1 {
	margin-top: 17rpx;
	height: 30rpx;
	width: 2rpx;
	background-color: #000000;
}
.huodongbox {
	width: 692rpx;
	height: 198rpx;

	position: relative;
}
/* 精选套装 */
.list-box {
	width: 330rpx;
	height: 160rpx;
	margin-bottom: 20rpx;
}
.scroll-box {
	background-color: #e6e6e6;
	width: 100rpx;
	height: 10rpx;
}
.scroll-btn {
	background-color: #1ca376;
	width: 50rpx;
	height: 10rpx;
}
.list-title {
	width: 180rpx;
	height: 32rpx;
	line-height: 32rpx;
}
.list-des {
	width: 180rpx;
	height: 58rpx;
	line-height: 29rpx;
	overflow: hidden;
}
.box-img {
	width: 120rpx;
	height: 120rpx;
}
/* 分类 */
.my-shop-large-img {
	border-bottom-left-radius: 0rpx;
	border-top-left-radius: 30rpx;
	border-top-right-radius: 30rpx;
	border-bottom-right-radius: 0rpx;
}
.my-shop-large {
	border-radius: 30rpx;
}
.justify-content {
	justify-content: space-between;
}
.gotoCat {
	width: 48rpx;
	height: 48rpx;
}
.overflow-hidden {
	overflow: hidden;
}

/*隐藏滚动条*/
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
</style>
